<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>财务统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <script type="text/javascript" src="../../layuiadmin/js/system/jquery.min.js"></script>
    <script type="text/javascript" src="../../layuiadmin/js/system/jquery.cookie.js"></script>
    <<style>
        #divbut{
            position:absolute;
            top:10px;
            left: 700px;
        }
        #divData{
            position:absolute;
            top:10px;
            left:10px;
        }
        #divShow{
            position:absolute;
            top:60px;
            left:200px;
            background-color: white;
            border: #8c8c8c;
            width: 800px;
            height: 580px;
            align-content: center;
        }
    </style>
    <script>
        $(function () {
            var divShow=$("#div");
            var arr=['1001','1002','1003','1004','1005','100101','100102','100103','100104','100201','100202','100203','100301','100302','100401','100402','100403','100404','100501','100601','10010301','10010302','10010303']
               $.post("http://localhost:8080/financePayoutController/payouttypelist"
                , function (msg) {
                    for (var i = 0; i < msg.length; i++) {
                        var num=0;
                        if (msg[i].pid==0){
                            var div=$("<div style='font-size: 18px;margin-top:5px;'>"+msg[i].payoutName+":<font id='"+msg[i].payoutTypeId+"' style='margin-left: 20px'>0元</font></div>")
                            for(var j=0;j<msg.length;j++){
                                if(msg[j].pid==msg[i].payoutTypeId){
                                    num+=1;
                                    var div1=$("<div style='font-size:16px;margin-left: 20px;margin-top:5px;'>"+num+"、"+msg[j].payoutName+":<font style='margin-left: 20px' id='"+msg[i].payoutTypeId+"'>0元</font></div>")
                                    for (var m=0;m<msg.length;m++){
                                        if(msg[m].pid==msg[j].payoutTypeId){
                                            var div2=$("<div style='font-size:14px;margin-left: 30px;margin-top:5px;'>"+msg[m].payoutName+":<font style='margin-left: 20px' id='"+msg[i].payoutTypeId+"'>0元</font></div>")
                                            div1.append(div2)
                                        }
                                    }
                                    div.append(div1);
                                }
                            }
                            divShow.append(div);
                        }
                    }
                })
           $("#sub").click(function () {
               var time=$("#test-laydate-range-date").val();
              for (var j=0;j<arr.length;j++){
                   $("#"+arr[j]).html("0元");
               }
               $.post("http://localhost:8080/finStatistics/Statistics",{
               "time":time
               },function (msg) {
                   for (var i=0;i<msg.length;i++){
                       var id=msg[i].payout_type_id;
                      $("#"+id).html(msg[i].money+"元");
                   }
                   }
               )
           })
            $("#oneM").click(function () {
                for (var j=0;j<arr.length;j++){
                    alert(arr[j])
                    $("#"+arr[j]).html("0元");
                }
                $.post("http://localhost:8080/finStatistics/Statistics",{
                        "time3":1
                    },function (msg) {
                        for (var i=0;i<msg.length;i++){
                            var id=msg[i].payout_type_id;
                            $("#"+id).html(msg[i].money+"元");
                        }
                    }
                )
            })
            $("#threeM").click(function () {
                for (var j=0;j<arr.length;j++){
                    alert(arr[j])
                    $("#"+arr[j]).html("0元");
                }
                $.post("http://localhost:8080/finStatistics/Statistics",{
                        "time3":3
                    },function (msg) {
                        for (var i=0;i<msg.length;i++){
                            var id=msg[i].payout_type_id;
                            $("#"+id).html(msg[i].money+"元");
                        }
                    }
                )
            })
            $("#sixM").click(function () {
                for (var j=0;j<arr.length;j++){
                    alert(arr[j])
                    $("#"+arr[j]).html("0元");
                }
                $.post("http://localhost:8080/finStatistics/Statistics",{
                        "time3":6
                    },function (msg) {
                        for (var i=0;i<msg.length;i++){
                            var id=msg[i].payout_type_id;
                            $("#"+id).html(msg[i].money+"元");
                        }
                    }
                )
            })
            $("#oneY").click(function () {
                for (var j=0;j<arr.length;j++){
                    alert(arr[j])
                    $("#"+arr[j]).html("0元");
                }
                $.post("http://localhost:8080/finStatistics/Statistics",{
                        "time3":12
                    },function (msg) {
                        for (var i=0;i<msg.length;i++){
                            var id=msg[i].payout_type_id;
                            $("#"+id).html(msg[i].money+"元");
                        }
                    }
                )
            })
        })
    </script>
</head>
<body>
<div class="layui-form" wid100 id="divData">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test-laydate-range-date" placeholder=" - ">
            </div><button class="layui-btn" id="sub" type="button">搜索</button>
        </div>
    </div>
</div>
<div class="layui-card-body" id="divbut">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-btn-radius" id="oneM" value="1">近一个月</button>
        <button class="layui-btn layui-btn-primary layui-btn-radius" id="threeM" value="3">近三个月</button>
        <button class="layui-btn layui-btn-primary layui-btn-radius" id="sixM" value="6">近半年</button>
        <button class="layui-btn layui-btn-primary layui-btn-radius" id="oneY" value="12">近一年</button>
    </div>
</div>
<div class="layui-tab-content" id="divShow">
    <div id="div"style="margin-left: 150px;">

    </div>

</div>
<script src="../../layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'laydate'], function(){
        var laydate = layui.laydate;
        //日期范围
        laydate.render({
            elem: '#test-laydate-range-date'
            ,range: true
        });
    });
</script>
</body>
</html>